<template>
  <up-navbar title="鉴定价格" @rightClick="rightClick" placeholder rightText="保存" :autoBack="true">
  </up-navbar>
  <view class="appraisal-page">
    <view class="appraisal-title">藏品鉴定价格</view>
    <view class="appraisal-content" v-for="item,index in identifyList" :key="item.id">
      <view class="content-name">{{item.name}}价格</view>
      <view class="content-int">
        <up-input :placeholder="'请输入'+item.name+'鉴定价格'" type="number" border="none" v-model="item.price"
          @blur="onFocus(item)"></up-input>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    priceList,
    modifyPrice
  } from '../api.js'
  import {
    ref
  } from 'vue'
  const value = ref('')
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const identifyList = ref([])
  onLoad(() => {
    priceListApi()
  })
  const priceListApi = (async () => {
    const res = await priceList()
    if (res && res.code === 1) {
      identifyList.value = res.data
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  const modifyPriceApi = (async () => {
    const arrImg = identifyList.value.slice().reverse()
    for (let i = arrImg.length - 1; i >= 0; i--) {
      if (!arrImg[i].price) {
        uni.showToast({
          title: `请输入${arrImg[i].name}的价格`,
          icon: 'none'
        })
        return
      } else if (arrImg[i].price >= 1) {
      } else {
        uni.showToast({
          title: `${arrImg[i].name}的价格需大于1元`,
          icon: 'none'
        })
        return
      }
    }

    const res = await modifyPrice({
      price: identifyList.value
    })
    if (res && res.code === 1) {
      uni.showToast({
        title: "保存成功",
        icon: 'none'
      })
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  function onFocus(item) {
    if (item.price >= 1) {
      return
    } else {
      uni.showToast({
        title: `${item.name}的价格需大于1元`,
        icon: 'none'
      })
      item.price = ''
    }
  }

  function rightClick() {
    modifyPriceApi()
  }
</script>

<style lang="scss" scoped>
  .appraisal-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40rpx 30rpx;

    .appraisal-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333;
      position: relative;
      width: max-content;
      z-index: 1;
      display: flex;
      margin-bottom: 24rpx;
    }

    .appraisal-title:before {
      content: "";
      width: 100%;
      height: 16rpx;
      opacity: 0.5;
      background: linear-gradient(90deg, $color 0%, transparent 100%);
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 0;
    }

    .appraisal-content {
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      width: 690rpx;
      height: 88rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 0 32rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;

      .content-name {
        width: 25%;
      }

      .content-int {
        flex: 1;
      }
    }
  }
</style>